<script>
import { ref } from 'vue';

/* 
setup 函数
1. setup 函数是一个新的组件选项, 作为组件中 compositionAPI 的起点
2. 从生命周期角度来看, setup 会在 beforeCreate 钩子函数之前执行
3. **setup 中不能使用 this, this 指向 undefined**
4. 在模版中需要使用的数据和函数，需要在 `setup` 返回。
*/
export default {
  beforeCreate() {
    console.log('我是beforeCreate');
  },
  setup() {
    console.log('我是setup,拿不到this', this);
    const count = ref(0);
    const add = () => {
      count.value += 1;
    };

    return { count, add };
  },
};
</script>

<template>
  <h1 @click="add">Hello vue3 - {{ count }}</h1>
</template>
